iT邦幫忙

第 11 屆 iThome 鐵人賽

DAY 30
4

終於到最後一篇了, 一路持續寫過來, 這三十天中間有的時候下班很累, 心情浮躁就草草亂寫, 也有想放棄的念頭, 所幸最後我撐過來了.

這三十天中我盡力介紹Typescript 了不少語法示範, 中間穿插講解一些程式設計守則, 和一些Typescript 進階的應用範例, 試圖表明Typescript 的強大, 內容說明解釋要是有寫得不夠清楚的地方, 多多包涵.

VSCode Extension 常用的擴充套件

VSCode 除了提供編輯文字的功能, 也提供了擴充功能(Extension), 下面是幾個常用的擴充套件, 按下 CTRL + SHIFT + X 打開擴充功能, 或是點取VSCode 最左邊的第五個Icon 圖示, 輸入欲安裝套件的名稱.

套件名稱 套件功能說明
Prettier - Code formatter 程式碼格式化工具, 不用再浪費時間手動格式化程式碼, 同時也能夠統一程式碼風格.
Settings Sync 如果你有許多台工作電腦, 它可以幫你同步設定檔和安裝的套件
Git History 可以方便查看Git 紀錄以及檔案歷史, 甚至是Line History
Vetur 寫Vue 必裝的套件
Vim 快速編輯文字游標控制的套件
Relative Line Numbers 跟Vim 配合的套件, 顯示游標的相對行數
Visual Studio Keymap 安裝後就有大部分的 Visual Studio 快捷鍵對應
Live Share Pair Programming 結對編程好用的工具

ECMAScript 是甚麼

JavaScript 是1995 年誕生的, 而JavaScript 的標準是1999 制定出來的, 那時候JavaScript 只能運行在網景(Natscape)的瀏覽器裡.

Netscape 瀏覽器屬於網景通訊公司, 曾經是一家美國的電腦服務公司, 那時候在網際網路市場裡Netscape 市佔率曾高達75%, 卻不敵微軟而被在1998 年以42億美元收購, Internet Explorer (簡稱IE) 開始統領風騷瀏覽器市場, 那時是混亂的年代.

用來規範JavaScript 的標準稱為ECMA-262, 又被稱為 ECMAScript. Ecma 國際(Ecma International) 是一家國際性會員制度的信息和電信標準組織, ECMAScript 給Ecma 進行標準化, 直到現在JavaScript 有9 個版本的規範. 有關所有ECMAScript 版本歷史可以透過 wiki 查看.

而事實上JavaScript 只是其中一種ECMA-262 標準的實作語言而已, 其他TypeScript, CoffeeScript也都同屬此類.

Babel vs Typescript 差異!?

甚麼是Babel ? Babel 是一個JavaScript 轉換器, 主要透過語法轉換器來將ECMAScript 最新版本的程式碼轉換為向後兼容的JavaScript 語法, 以便能夠運作在目前或舊版本的瀏覽器中, 而不用擔心現有瀏覽器環境是否支持.

務必牢記 Babel 不做類型檢查

這跟Typescript 定位的不一樣, Typescript 雖然也能轉換新語法到兼容的JavaScript 語法, 但Typescript 提供的也就恰恰是軟體開發中所最需要的類型語法檢查, interface, class, 泛型(Generic), 變數宣告類型該有的都有. 編譯時期(compile-time) 就可以偵測找出許多低級錯誤, 節省JavaScript 一堆 getXXX 函數, setXXX 函數, 還能預設參數.

總結

JavaScript 語言具有以下特點:

  • 它是動態類型語言, 優點是語法簡潔, 具有較高的彈性, 最直接效益就是節省打字的功夫
  • Javascript 執行的時候透過V8 (Google 開發的Javascript 引擎)編譯成機器碼,然後由瀏覽器逐行一一加載解釋執行.
  • 不支援其它物件導向語言所具有的繼承和重載功能

JavaScript 劣勢或是缺點

  • 動態語言不需要型態資訊, 只要打上變數名稱, 傳回型態也無需宣告就能使用, 導致程式碼說明不夠清楚, 語義不清
  • 有任何錯誤在執行時期(runtime-time) 才會呈現出來
  • 由於沒有型態資訊, 編輯程式碼上的輔助(intellisense)或重構工具通常支援性不夠

Typescript 是JavaScript 的超集, 包含了JavaScript 的所有元素, 並擴展了JavaScript 的語法.

TypeScript 具有以下特點:

  • TypeScript 是Microsoft 2014 年發布推出的
  • 提供了靜態類型, 物件(Class), 模組(Module), 介面(Interface)
  • 提供編譯時型別檢查, 語法檢查
  • 它是開源的, 原始碼可以在 Github 獲得

在大型應用程式專案開發中, 一定會有不少工作夥伴一起寫程式, 分別負責不同的功能, 一開始大家都會整理一個共同規範, 欄位變數名稱規則, 物件名稱, 資料夾名稱都會有一定的規則, 但這樣一來雖然降低了管理的困難, 卻也無法提升大家對於每一個人寫的程式內容的理解.

用JavaScript 寫程式容易散漫, 較隨意的寫很多var 變數, 物件與方法, 到最後可能會連自己都忘記是做什麼用的, 最後會變成要不然就是充滿註解, 系統文件也看不懂, 溝通又需要花時間. 所以呢, 快用Typescript 來強制宣告類型, 讓程式碼會說話.

用Typescript 能夠解決以下要點

  • 對於容易粗心大意的人, 靜態類型化可以在開發編輯時檢測到語法錯誤
  • 有Class, Interface, Private, Protected, Public... 這些關鍵字, 支援物件導向語法, 可以讓程式碼說得更清楚, 消滅註解, 甚至系統文件
  • 對泛型的功能支持度很高, 跟C# 的泛型功能超級像, 甚至超過
  • 支援條件類型, 更支援函數編程
  • 支援跟C# Attribute 一樣強大的裝飾器語法

對了, Typescript 產生出來的 Javascript 檔案, 我們可以貼在瀏覽器中的開發人員工具中的控制台實驗看看之外, 你也能到 JSBin 或是 jsfiddle 這些線上工具進行實驗測試.

結尾

各位, 如果你還沒用過Typescript 或是還在遲疑要選Javascript 或是 Typescript, 別猶豫! 從今天開始改用Typescript 語法來寫程式吧, 寫久了相信你就會跟犀利人妻一樣.

可是瑞凡, 我回不去了!

如果你已經是Typescript 前端開發者, 不要忘記我們有Typescript 與你同行.

最後貼上電影中的名言 ---

為什麼世界需要Typescript (超人)


上一篇
快取裝飾器 - 29
系列文
為什麼世界需要Typescript30
圖片
  直播研討會
圖片
{{ item.channelVendor }} {{ item.webinarstarted }} |
{{ formatDate(item.duration) }}
直播中

2 則留言

0
阿展展展
iT邦好手 1 級 ‧ 2020-03-13 08:37:31

恭喜完賽!!!

0
andy840119
iT邦新手 5 級 ‧ 2020-05-18 15:05:44

\恭喜完賽/

我要留言

立即登入留言